<template>
	<view class="class_collect" @click="goClassDetails">
		<u-image :src="classInfo.course.img" width="150px" height="80px" radius="4px"></u-image>
		<view class="right">
			<view class="f-s-14">{{classInfo.course.title}}</view>
			<view class="content">
				<price :price="classInfo.course.price" />
				<view @click.stop>
					<u-button text="取消收藏" color="#F3F3F4" :customStyle="{
											color: '#303133',fontWeight: 'bolder'
										}" @click="collectClick" size="small"></u-button>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import teacherIconText from "@/components/common/teacher-icon-text.vue"
	import Price from "@/components/common/price.vue"
	import {
		ref,
		defineProps,
	} from 'vue'
	import {
		delCollect
	} from "@/api/class/online.js"
	const props = defineProps({
		classInfo: Object,
	})
	const emit = defineEmits(['classList'])

	function goClassDetails() {
		uni.navigateTo({
			url: '/subPackages/class/index?id=' + props.classInfo.otherId
		})
	}

	function collectClick() {
		//取消收藏
		delCollect(props.classInfo.id)
		emit('classList')
	}
</script>

<style lang="scss">
	.class_collect {
		flex: 1;
		background-color: #fff;
		margin-bottom: 12px;
		border-radius: 8px;
		padding: 12px;
		display: flex;
		align-items: center;

		.right {
			margin-left: 16px;
			flex: 1;

			.content {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 14px;
				color: #9b9b9b;
				font-size: 12px;

				.people {
					display: flex;
					align-items: center;
				}
			}
		}
	}
</style>